<template>
  <div class="page-login">
    <div class="login-wrapper">
      <div class="title">—— <span>欢迎登录</span> ——</div>
      <div class="title">welcome</div>
      <el-form
        :model="formData"
        status-icon
        :rules="rules"
        ref="loginForm"
        class="form-wrapper"
      >
        <el-form-item prop="phone">
          <el-input
            v-model.number="formData.phone"
            placeholder="请输入手机号"
            prefix-icon="el-icon-user"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="formData.password"
            autocomplete="off"
            placeholder="请输入密码"
            prefix-icon="el-icon-s-goods"
          ></el-input>
        </el-form-item>
        <el-form-item class="forget"> <span>忘记密码？</span></el-form-item>
        <el-form-item>
          <el-button class="btn" type="primary" round @click="submitForm">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { validatePassword, validatePhone } from '@/utils/validate'
import { userLogin } from '@/apis/user'
export default {
  name: 'home',
  data () {
    return {
      formData: {
        phone: '',
        password: ''
      },
      rules: {
        phone: [{ validator: validatePhone, trigger: 'blur' }],
        password: [{ validator: validatePassword, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.login()
        }
      })
    },
    async login () {
      try {
        const {
          returnCode,
          data: {
            token,
            mobile,
            nickname
          }
        } = await userLogin(this.formData)
        if (returnCode === '0' && token) {
          this.$store.commit('user/setUser', {
            token,
            mobile,
            nickname
          })
          this.$router.push(this.$route.query.redirectUrl || '/')
        }
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

<style scoped lang="less">
.page-login {
  height: 100vh;
  background: url("../../assets/images/bg.png") no-repeat center / cover;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .login-wrapper {
    margin-right: 200px;
    width: 400px;
    height: 600px;
    border-radius: 14px;
    border: solid 1px #ffffff8e;
    background-color: @helpColor;
    box-shadow: 0px 0px 20px 10px #b8d2f7e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .title {
      font-family: "Courier New", Courier, monospace;
      font-size: 24px;
      font-weight: 600;
      color: #646972;
    }
    .form-wrapper {
      margin-top: 40px;
      width: 300px;
      .btn {
        margin-top: 10px;
        width: 100%;
      }
      ::v-deep .el-input__inner {
        border-radius: 20px;
        border: solid 1px #b5c1cf;
        background-color: #dce9fc;
      }
      .forget {
        text-align: right;
        color: @mainColor;
        cursor: pointer;
        &:active {
          opacity: 0.7;
        }
      }
    }
  }
}
</style>
